<template>
    <div id="pmw_gysjymx">
        <!--选项卡插件-->
        <el-tabs id="p_gysjymx_box" type="border-card">
            <el-tab-pane label="供应商交易明细">
                <div class="p_table">
                    <el-table
                            :data="searchData"
                            style="width: 100%"
                            :default-sort = "{prop: 'time', order: 'descending'}"
                            height="500"
                            :stripe=true
                            :border=true
                            :header-cell-style="{backgroundColor:'#409EFF',textAlign:'center',color:'white'}"
                            :cell-style="{textAlign:'center'}"
                    >
                        <el-table-column
                                prop="provider"
                                label="供应商名称"
                                min-width="20%">
                        </el-table-column>
                        <el-table-column
                                prop="goodsName"
                                label="交易商品名"
                                min-width="20%">
                        </el-table-column>
                        <el-table-column
                                prop="time"
                                sortable
                                label="交易时间"
                                min-width="20%">
                        </el-table-column>
                        <el-table-column
                                prop="price"
                                sortable
                                label="交易金额/元"
                                min-width="20%">
                        </el-table-column>
                        <el-table-column
                                prop="number"
                                sortable
                                label="交易数量"
                                min-width="20%">
                        </el-table-column>
                        <el-table-column
                                prop="unit"
                                label="计量单位"
                                min-width="20%">
                        </el-table-column>
                    </el-table>
                </div>
                <!--交易金额总计-->
                <div class="p_total">交易金额总计：<span>{{sumMoney}}</span>元</div>
            </el-tab-pane>
        </el-tabs>
        <!--搜索框部分-->
        <div class="p_search clear">
            <div><el-input v-model="searchValue" placeholder="请输入供应商名称"></el-input></div>
            <div><el-button type="primary" @click="searchPerson">搜索</el-button></div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "pmw_gysjymx",
        data() {
            return {
                searchValue: '',
                searchData:[],
                total:0,
            }
        },
        methods: {
            searchPerson(){
                let data= {
                    "pager": {
                        "currentPage": 0,
                        "pageSize": 0
                    },
                    "provider": this.searchValue,
                };
                axios({
                    url: '/api/rms/finance/record/queryByProvider',
                    method: 'post',
                    params:data,
                    transformRequest:[function () {
                        return JSON.stringify(data)
                    }],
                    headers:{
                        'Content-Type':'application/json;'
                    },
                }).then(res => {
                    this.searchData=[];
                    if(this.searchValue===''||res.data.info.length!==0)this.searchData=res.data.info;
                })
            },
        },
        computed:{
            sumMoney(){
                this.total=0;
                if(this.searchData.length>0){
                    this.searchData.map(item=>this.total+=item.price)
                }
                return this.total;
            }
        },
        created() {
            let data={
                "currentPage": 1,
                "pageSize": 10
            };
            axios({
                url: '/api/rms/finance/record/all',
                method: 'post',
                params:data,
                transformRequest:[function () {
                    return JSON.stringify(data)
                }],
                headers:{
                    'Content-Type':'application/json;'
                },
            }).then(res => {
                this.searchData=res.data.info
            })
        },
    }
</script>

<style scoped lang="less">
    .el-button--primary{
        height: 40px;
        padding: 0 20px;
    }
    *{
        margin: 0;
        padding: 0;
    }
    .clear:after{
        content: '';
        clear: both;
        display: block;
    }
    #pmw_gysjymx{
        position: relative;
        padding: 20px;
        /*选项卡*/
        #p_gysjymx_box{
            .p_table{
                padding:25px 50px;
            }
            .p_total{
                height: 40px;
                line-height: 40px;
                margin-bottom:10px ;
                padding: 0 50px;
                text-align: right;
                color: #797d85;
                span{
                    color: #67C23A;
                    font-weight:bold ;
                    cursor: default;
                }
            }
        }
        /*搜索框*/
        .p_search{
            position: absolute;
            top: 20px;
            right: 20px;
            padding-right: 5px;
            &>div{
                float: left;
                margin-left: 10px;
            }
            div:first-child{
                width: 130px;
            }
        }
    }
</style>
